<!-- 
 * @description: dropdown下拉组件
 * @fileName: BDropDown.vue 
 * @author: xp 
 * @date: 2024-01-02 11:05:06
-->
<template>
  <div class="b-dropdown-container" ref="bDropdown" @mouseenter="handleMouseEnter">
    <slot></slot>
    <div class="dropdown-list" ref="dropdownList" :style="{ width, top: dropdownTop + 'px', left: left + 'px' }">
        <template v-for="(item, index) in list">
            <div :class="['dropdown-item', {'line': (lineIndex - 1) == index}]" :key="index" @click.stop="handleClick(index, item)" v-if="rules? rules(index, item) : true">
                <i :class="[item.icon, 'b-dropdown-icon']" v-if="item.icon"></i>
                <span>{{item[valueName || 'name']}}</span>
            </div>
        </template>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // list 数据数组
    list: {
        type: Array,
        defalut: () => []
    },
    // keyName
    keyName: [String],
    // valueName
    valueName: [String],
    // dropdown宽度
    width: [String],
    // 第几个后面item加横线
    lineIndex: [Number],
    rules: [Function],
  },
  name: '',
  data () {
    return {
      top: 0,
      left: 0,
      listHeight: '', // list高度
      dropdownHeight: '', // icon - dropDown按钮高度
      dropdownWidth: '', //  icon - dropDown按钮宽度
    }
  },
  created() {
    
  }, 
  mounted() {
    setTimeout(() => {
        this.$nextTick(() => {
            this.dropdownHeight = this.$refs.bDropdown.clientHeight // 按钮高度
            this.dropdownWidth = this.$refs.bDropdown.clientWidth // 按钮宽度
        })
    });
  },
  computed: {
    dropdownTop() {
        return this.top
    }
  },
  methods: {
    // 选中
    handleClick(index, item){
        this.$emit('change', { index, item })
    },
    // 鼠标移入时
    handleMouseEnter(e, a) {
        let sceenHeight = window.innerHeight  // 获取浏览器可视高度
        let listCount = this.list.length // 悬浮窗数组长度
        this.$nextTick(() => {
            let listWidth =  this.$refs.dropdownList.clientWidth // 悬浮窗宽度
            let listHeight =  0 // 悬浮窗高度
            if (this.lineIndex != undefined) { // 有分割线
                listHeight = listCount * 38 - 16 + 32 + 33
            } else { // 无分割线
                listHeight = listCount * 38 + 24
            }
            // layerY  进入时 Y轴位置
            // layerX  进入时 X轴位置
            this.left = this.dropdownWidth - e.layerX + e.pageX - listWidth
            this.top = this.dropdownHeight - e.layerY + e.pageY - 1
            if ((e.pageY + listHeight - e.offsetY) > sceenHeight) { // 超出浏览器高度
                this.top = e.pageY - e.layerY - listHeight + 1
            }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.b-dropdown-container{
    position: relative;
    display: inline-block;
    .dropdown-list{
        display: none;
        position: fixed;
        right: 0;
        top: 0;
        background: #ffffff;
        padding: 16px;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
        border-radius: 4px;
        z-index: 999;
        .dropdown-item{
            box-sizing: content-box;
            display: block;
            height: 30px;
            line-height: 30px;
            margin-bottom: 8px;
            padding: 0 8px;
            text-align: left;
            border-radius: 4px;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.85);
            .b-dropdown-icon{
                margin-right: 8px;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.85);
            }
            &:hover{
                background: rgba(245, 247, 250, 1);
            }
            &:last-of-type{
                margin-bottom: 0;
            }
        }
        .line{
            position: relative;
            margin-bottom: 32px;
            &::after{
                position: absolute;
                left: 0;
                right: 0;
                bottom: -16px;
                height: 1px;
                background: #EBEEF5;
                content: '';
            }
        }
    }
    &:hover{
        .dropdown-list{
            display: block;
            // transition: 0.5s;
        }
    }
}
</style>